<template>
  <div id="Analysis">
    <section class="c-list" v-for="(data,pk) in dataList" :key="pk">
      <h3 class="c-list__title">{{data.title}}</h3>
      <van-cell-group class="c-list__cmp" v-for="(item,key) in data.list" :key="key">
        <van-cell :value="item.val" :title="item.label"/>
      </van-cell-group>
    </section>
  </div>

</template>

<script>
  const dataList = [
    {
      title: "全市企业数据",
      list: [{label: "全市企业总数", val: 3442}, {label: "泥头车企业", val: 3442}, {label: "货运企业", val: 3442}]
    }, {
      title: "各区企业数据",
      list: [{label: "宝安区", val: 3442}, {label: "南山区", val: 3442}, {label: "福田区", val: 3442}]
    }, {
      title: "全市驾驶员数据",
      list: [{label: "宝安区", val: 3442}, {label: "南山区", val: 3442}, {label: "福田区", val: 3442}]
    }, {
      title: "各区驾驶员数据",
      list: [{label: "宝安区", val: 3442}, {label: "南山区", val: 3442}, {label: "福田区", val: 3442}]
    },
  ];
  export default {
    name: "Analysis",
    data() {
      return {dataList}
    },
    methods: {},
    computed: {},
    onShow() {
    }
  }
</script>

<style scoped lang="scss">
  #Analysis {
    .c-list {
      margin: 20px 10px;
      box-shadow: 0 1px 5px 2px #ccc;
      border-radius: 6px;
      overflow: hidden;
      padding: 0 8px;
      box-sizing: border-box;
      &__title {
        text-align: center;
        padding: 16px 0;
      }
    }
  }
</style>
